<template>
  <div class="sassLogin-container">
    <div class="sass-logo">
      欢迎使用 三宝金山运营平台
    </div>
    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      class="login-form"
      auto-complete="on"
      label-position="left"
    >
      <div class="login-main">
        <div class="login-title">
          三宝金山运营平台
        </div>
        <el-form-item
          prop="username"
          class="item-bottom"
        >
          <span class="svg-container">
            <svg-icon icon-class="login" />
          </span>
          <el-input
            ref="username"
            v-model="loginForm.username"
            placeholder="请输入用户名"
            name="username"
            type="text"
            tabindex="1"
            auto-complete="off"
          />
        </el-form-item>
        <el-form-item
          prop="password"
          class="item-bottom"
        >
          <span class="svg-container">
            <svg-icon icon-class="passwordline" />
          </span>
          <el-input
            :key="passwordType"
            ref="password"
            v-model="loginForm.password"
            :type="passwordType"
            placeholder="请输入密码"
            name="password"
            tabindex="2"
            auto-complete="off"
            @keyup.enter.native="handleLogin"
          />
          <span
            class="show-pwd"
            @click="showPwd"
          >
            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-button
          :loading="loginLoading"
          class="sassButton"
          @click.native.prevent="handleLogin"
        >
          {{ loginText }}
        </el-button>
        <div class="edition">
          当前版本：v1.0.0
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import { randomLenNum } from '@/utils/index'
import { mapGetters } from 'vuex'
// import { mapActions } from 'vuex'
export default {
  name: 'Login',
  data() {
    return {
      // 登录页加载效果
      loginText: '登 录',
      loginLoading: false,
      loginForm: {
        username: '',
        password: '',
        code: '',
        randomStr: '',
        platform: '0'
      },
      code: {
        src: '/admin/code',
        value: '',
        len: 4,
        type: 'image'
      },
      loginRules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度最少为6位', trigger: 'blur' }
        ]
      },
      passwordType: 'password',
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  computed: {
    ...mapGetters(['tagWel'])
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      this.loginText = '登录中'
      this.loginLoading = true
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.$store.dispatch('user/SassLoginByUsername', this.loginForm).then(
            res => {
              this.$store.commit('tags/ADD_TAG', this.tagWel)
              this.$router.push({ path: this.tagWel.value })
            },
            error => {
              console.log(error)
              this.loginText = '登录'
              this.loginLoading = false
            }
          )
        }
      })
    }
  }
}
</script>
<style lang="scss" >
@import './sassLogin.scss';
</style>
